<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 图标 -->
    <link rel="icon" href="screenshots/favicon.ico">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="button.css" rel="stylesheet">
    <title>bootstrap</title>
    <style>
    	*{margin: 0;padding: 0;}
    	.nav_btn{margin-top: 8px;}
    	img.main_slide{width: 100%;}
    	.carousel-control{font-size: 40px;}
    	body{background: #facc71;}
    	.foot-wrap{ background-color: #373f48; margin-top:80px;} 
    	.row-content >h3{ color:#DDD; font-size:16px; font-weight: 300; line-height: 16px; margin:40px 0 30px 34px;}
    	.row-content >ul{ font-size:13px; line-height:24px;}
    	.row-content >ul >li{ list-style:none;}
    	.row-content >ul >li >a{ color:#878B91;}
    	.row-content >ul >li >a:hover{ text-decoration:none; color:#c1ba62;}
    	.logo{margin-top: -6px;}
    </style>
</head>
<body>
    <!--导航栏-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <!--格式化-->
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand logo"><img src="screenshots/favicon.png" alt="bootstrap"></a>
                <!-- 响应式 -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="http://www.bootcss.com/" target="_blank"><span class="glyphicon glyphicon-home"></span>&nbsp;中文网</a></li>
                    <li><a href="https://www.bootcdn.cn/" target="_blank">CDN</a></li>
                    <li><a href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">菜鸟教程</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他资料 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="https://www.cnblogs.com/neverc/p/4782635.html" target="_blank">7天上手</a></li>
                            <li><a href="#">第二个</a></li>
                            <li><a href="#">三个</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                    <a href="#" class="btn btn-success nav_btn"><span class="glyphicon glyphicon-user"></span>&nbsp;登录</a>
                    <a href="#" class="btn btn-info nav_btn"><span class="glyphicon glyphicon-user"></span>&nbsp;注册</a>
                </ul>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首选</a></li>
                    <li><a href="#">禁用</a></li>    
                </ul>
            </div>
        </div>
    </nav>


<!--轮播导航插件-->
<div id="myCarousel" class="carousel slide">
	<!--用列表绑定事件-->
	<ol class="carousel-indicators">
		<!--绑定事件	循环标记	被首选-->
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
		<li data-target="#myCarousel" data-slide-to="3"></li>
	</ol>
	<!--用css样式将底下的选择器选中，图片居中，以此适应更大型的显示设备显示.carousel-inner img-->
	<div class="carousel-inner">
		<!--可以在下面的div里指定背景颜色用来填补图片大小造成的影响-->
		<div class="item active">
			<img class="main_slide" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546750869068&di=edafc4fe7f8e15e6c1a96d781c03a796&imgtype=0&src=http%3A%2F%2Fimg.pptjia.com%2Fimage%2F20180117%2Ff4b76385a3ccdbac48893cc6418806d5.jpg" alt="描述">
			<div class="container">
				<div class="carousel-caption">
					<h1>bootstrap</h1>
					<p><code>code：</code>使用bootstrapCDN，本页面版本3.3.7。示例使用CDN加速，版本4.1.1</p>
					<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>
				</div>
			</div>
		</div>
		<div class="item">
			<img class="main_slide" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546750942096&di=7d4f127f7b166109b35c68ffd39c1f17&imgtype=0&src=http%3A%2F%2Fwww.miguyx.com%2Fwp-content%2Fuploads%2F2015%2F10%2F2015-10-1934.jpg" alt="描述">
			<div class="container">
				<div class="carousel-caption">
					<h1>她是</h1>
					<p><code>code：</code>一个强大的前端框架，布局简单，具有响应式。</p>
					<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>
				</div>
			</div>
		</div>
		<div class="item">
			<img class="main_slide" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546750974303&di=b8614ee5be68fdc296b26c8fe8f34394&imgtype=0&src=http%3A%2F%2Fa4.topitme.com%2Fo%2F201101%2F03%2F12939857045446.jpg" alt="描述">
			<div class="container">
				<div class="carousel-caption">
					<h1>应用</h1>
					<p><code>code：</code>网站首页、个人博客，登录注册，后台管理等等……</p>
					<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>
				</div>
			</div>
		</div>
		<div class="item">
			<img class="main_slide" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546751013258&di=df229bdadad9eb6eaa8685a37f65ff1d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F56a0305f0bf29.jpg" alt="描述">
			<div class="container">
				<div class="carousel-caption">
					<h1>发展的</h1>
					<p><code>code：</code>已经到了V4，以下示例就将使用V4进行。</p>
					<p><a href="javascript:;" class="btn btn-info"><span class="glyphicon glyphicon-hand-right"></span>&nbsp;试一下</a></p>
				</div>
			</div>
		</div>
	</div><!--绑定事件	上下分页	样式和位置	运用选择器.carousel-control将字体放大-->
	<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
	<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div><br/><h2 align="center">V4官方示例</h2><hr>
<div class="container">
	<div class="row">
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/album.png">
				<div class="caption">
					<h3>相册</h3>
					<p>简单的相册模板主题</p>
					<p><a href="src/album/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/blog.png">
				<div class="caption">
					<h3>博客</h3>
					<p>博客主题</p>
					<p><a href="src/blog/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/carousel.png">
				<div class="caption">
					<h3>圆形模板</h3>
					<p>一个具有圆形头像的模板示例</p>
					<p><a href="src/carousel/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/checkout.png">
				<div class="caption">
					<h3>表单约束</h3>
					<p>一个表单检查的小例子</p>
					<p><a href="src/checkout/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/cover.png">
				<div class="caption">
					<h3>全屏示例</h3>
					<p>全屏画布覆盖</p>
					<p><a href="src/cover/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/dashboard.png">
				<div class="caption">
					<h3>仪表盘示例</h3>
					<p>类似后台布局的示例</p>
					<p><a href="src/dashboard/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/floating-labels.png">
				<div class="caption">
					<h3>鼠标单击悬浮</h3>
					<p>鼠标单击输入框，文字悬浮</p>
					<p><a href="src/floating-labels/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/grid.png">
				<div class="caption">
					<h3>响应式布局</h3>
					<p>十二栅格系统</p>
					<p><a href="src/grid/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/jumbotron.png">
				<div class="caption">
					<h3>启动模板</h3>
					<p>bootstrap启动模板</p>
					<p><a href="src/jumbotron/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/navbar-bottom.png">
				<div class="caption">
					<h3>底部导航</h3>
					<p>底部导航模板举例</p>
					<p><a href="src/navbar-bottom/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/navbar-fixed.png">
				<div class="caption">
					<h3>导航固定</h3>
					<p>固定在顶部的导航</p>
					<p><a href="src/navbar-fixed/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/navbars.png">
				<div class="caption">
					<h3>导航栏</h3>
					<p>一些内置的导航栏</p>
					<p><a href="src/navbars/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/navbar-static.png">
				<div class="caption">
					<h3>静态导航栏</h3>
					<p>静态导航栏</p>
					<p><a href="src/navbar-static/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/offcanvas.png">
				<div class="caption">
					<h3>静止画布</h3>
					<p>静止画布</p>
					<p><a href="src/offcanvas/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/pricing.png">
				<div class="caption">
					<h3>定价示例</h3>
					<p>定价模板</p>
					<p><a href="src/pricing/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/product.png">
				<div class="caption">
					<h3>一个手机网站</h3>
					<p>仿苹果感觉</p>
					<p><a href="src/product/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/sign-in.png">
				<div class="caption">
					<h3>登录</h3>
					<p>简单登录</p>
					<p><a href="src/sign-in/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/starter-template.png">
				<div class="caption">
					<h3>最简单导航</h3>
					<p>基本导航栏</p>
					<p><a href="src/starter-template/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/sticky-footer.png">
				<div class="caption">
					<h3>粘脚示例</h3>
					<p>底部固定</p>
					<p><a href="src/sticky-footer/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6">
			<div class="thumbnail">
				<img src="screenshots/sticky-footer-navbar.png">
				<div class="caption">
					<h3>顶部和底部固定</h3>
					<p>固定导航</p>
					<p><a href="src/sticky-footer-navbar/index.html" target="_blank" class="btn btn-success">详情</a></p>
				</div>
			</div>
		</div>
	</div>

	<a href="#" class="button button-block button-rounded button-border button-primary button-small"><i class="glyphicon glyphicon-th"></i>&nbsp;加载更多</a><br/>

	<!-- 面板组 -->
	<div class="panel-group" id="accordion">
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
	                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
	                第 1 部分
	                </a>
	            </h4>
	        </div>
	        <div id="collapseOne" class="panel-collapse collapse in">
	            <div class="panel-body">
	                描述文字描述文字描述文字描述文字
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
	                <a data-toggle="collapse" data-parent="#accordion" 
	                href="#collapseTwo">
	                第 2 部分
	            </a>
	            </h4>
	        </div>
	        <div id="collapseTwo" class="panel-collapse collapse">
	        <div class="panel-body">
	            描述文字描述文字描述文字描述文字
	        </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            <h4 class="panel-title">
	                <a data-toggle="collapse" data-parent="#accordion"  href="#collapseThree">
	                第 3 部分
	                </a>
	            </h4>
	        </div>
	        <div id="collapseThree" class="panel-collapse collapse">
	            <div class="panel-body">
	                描述文字描述文字描述文字描述文字<br/>
	                描述文字描述文字描述文字描述文字<br/>
	                描述文字描述文字描述文字描述文字<br/>
	                描述文字描述文字描述文字描述文字<br/>
	                描述文字描述文字描述文字描述文字<br/>
	            </div>
	        </div>
	    </div>
	</div>	
</div>

<!-- 脚部 可以加fixed固定-->
<footer class="foot-wrap nav nav-footer"> 
<div class="container"> 
	<div class="row"> 
		<div class="row-content col-lg-2 col-sm-4 col-xs-6"> 
			<h3>标题</h3> 
			<ul> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
				<li><a href="#">文字</a></li> 
			</ul> 
		</div> 
		<div class="row-content col-lg-2 col-sm-4 col-xs-6">
		    <h3>标题2</h3>
		    <ul>
		        <li><a href="#">文字2</a></li>
		        <li><a href="#">文字2</a></li>
		        <li><a href="#">文字2</a></li>
		        <li><a href="#">文字2</a></li>
		        <li><a href="#">文字2</a></li>
		    </ul>
		</div>
		<div class="row-content col-lg-2 col-sm-4 col-xs-6">
		    <h3>标题3</h3>
		    <ul>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		        <li><a href="#">文字3</a></li>
		    </ul>
		</div>
		<div class="row-content col-lg-2 col-sm-4 col-xs-6">
		    <h3>标题4</h3>
		    <ul>
		        <li><a href="#">文字4</a></li>
		        <li><a href="#">文字4</a></li>
		        <li><a href="#">文字4</a></li>
		        <li><a href="#">文字4</a></li>
		        <li><a href="#">文字4</a></li>
		        <li><a href="#">文字4</a></li>
		    </ul>
		</div>
		<div class="row-content col-lg-2 col-sm-4 col-xs-6"> 
			<h3>标题5</h3> 
			<ul> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
				<li><a href="#">文字5</a></li> 
			</ul> 
		</div> 
		<div class="row-content col-lg-2 col-sm-4 col-xs-6"> 
			<h3>标题6</h3> 
			<ul> 
				<li><a href="#">文字6</a></li> 
				<li><a href="#">文字6</a></li> 
				<li><a href="#">文字6</a></li> 
				<li><a href="#">文字6</a></li> 
			</ul> 
		</div> 
	
	</div><!--/.row --> 
</div><!--/.container-->  
<p align="center" style="margin-top: 20px;color:#878B91;"> 
Copyright &copy;2015 yes 
</footer> 
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
    //用jQuery微调
	$(function(){
		//轮播自动开始
		// $('#myCarousel').carousel({
		// 	//给定轮播时间
		// 	interval : 4000,
		// });
	// 	//调整垂直居中显示这个翻页小图标
		$('.carousel-control').css('line-height',500+'px');
		$('.main_slide').css('height','500px');
	// 	//调整浏览器大小的时候再去执行垂直居中调整
		// $(window).resize(function(){
		// 	//对所有的滚动图片都这样弄
		// 	var $height = $('.carousel-inner img').eq(0).height() ||
		// 				$('.carousel-inner img').eq(1).height() ||
		// 				$('.carousel-inner img').eq(2).height() ||
		// 				$('.carousel-inner img').eq(3).height();
		// 	$('.carousel-control').css('line-height',$height + 'px');
		// });
	});
    </script>
</body>

</html>